<template>
  <div ref="warp" class="contentWarpBox">
    <div class="searchInfo">
      <div class="left">
        <el-input
          v-model="getSearchInfo.keyword"
          placeholder="用户账号/用户姓名"
          style="width:200px;marginLeft:3px;"
          :class="$style.Business"
        />
        <el-button type="primary" style="marginLeft:3px;" @click="searchInfoMation">搜 索</el-button>
      </div>
      <el-button
        v-if="accreditChildren.createUser"
        class="right"
        type="primary"
        @click="createUser"
      >新建用户</el-button>
    </div>
    <el-table ref="table" :data="tableData" stripe border :height="this.$getTableHeight">
      <el-table-column :show-overflow-tooltip="true" label="工号">
        <template slot-scope="scope">{{ scope.row.id ?scope.row.jobNumber :'&nbsp;' }}</template>
      </el-table-column>
      <el-table-column :show-overflow-tooltip="true" prop="userCode" label="用户账号" />
      <el-table-column :show-overflow-tooltip="true" prop="userName" label="用户姓名" />
      <el-table-column :show-overflow-tooltip="true" prop="orgName" label="所属部门" />
      <el-table-column :show-overflow-tooltip="true" prop="email" label="邮箱" />
      <el-table-column :show-overflow-tooltip="true" prop="phone" label="手机号" />
      <el-table-column :show-overflow-tooltip="true" prop="sex" label="性别" />
      <el-table-column :show-overflow-tooltip="true" prop="birthday" label="出生日期" />
      <el-table-column :show-overflow-tooltip="true" prop="cardNo" width="150" label="身份证号" />
      <el-table-column :show-overflow-tooltip="true" label="操作" width="200">
        <template slot-scope="scope">
          <span v-if="scope.row.id">
            <span
              v-if="accreditChildren.editUser"
              type="primary"
              style="color:rgb(64, 158, 255);cursor:pointer;margin-right:10px"
              @click="editUser(scope.row)"
            >编辑</span>
            <span
              v-if="accreditChildren.delUser"
              type="danger"
              style="color:rgb(245, 108, 108);cursor:pointer;margin-right:10px"
              @click="deleteUser(scope.row)"
            >删除</span>
            <span
              v-if="accreditChildren.delUser"
              type="primary"
              style="color:rgb(103, 194, 58);cursor:pointer;"
              @click="restUser(scope.row)"
            >重置密码</span>
          </span>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination clearfix">
      <Pagination
        class="right"
        :total-count="totalCount"
        :page-size="page.pageSize"
        :current-page="page.pageNo"
        @handleSizeChange="handleSizeChange"
        @handleCurrentChange="handleCurrentChange"
      />
    </div>
    <el-dialog
      :title="isEditor?'编辑用户':'新建用户'"
      center
      style="margin-top: -5vh;"
      :before-close="cancelUserInfo"
      :close-on-click-modal="false"
      :visible.sync="dialogTableVisible"
      width="600px"
    >
      <el-form
        ref="userline"
        :model="userline"
        :rules="rules"
        class="demo-form-inline"
        label-width="100px"
      >
        <el-form-item label="工号:" prop="jobNumber">
          <el-input v-model="userline.jobNumber" :disabled="isEditor" placeholder="请输入工号" />
        </el-form-item>
        <el-form-item label="用户账号:" prop="userCode">
          <el-input v-model="userline.userCode" :disabled="isEditor" placeholder="请输入用户账号" />
        </el-form-item>
        <el-form-item label="用户名称:" prop="userName">
          <el-input v-model="userline.userName" placeholder="请输入用户名称" />
        </el-form-item>
        <el-form-item label="所属部门:" prop="orgId">
          <el-popover v-model="visible2" placement="bottom" trigger="click" width="220">
            <el-tree
              default-expand-all
              :expand-on-click-node="false"
              :props="defaultProps"
              :data="orgs"
              @node-click="handleNodeClick"
            />
            <el-input slot="reference" :value="userline.departmentName" />
          </el-popover>
        </el-form-item>
        <el-form-item label="邮箱:" prop="email">
          <el-input v-model="userline.email" placeholder="邮箱" />
        </el-form-item>
        <el-form-item label="手机号:" prop="phone">
          <el-input v-model="userline.phone" placeholder="手机号" />
        </el-form-item>
        <el-form-item label="性别:">
          <el-radio v-model="userline.sex" label="男">男</el-radio>
          <el-radio v-model="userline.sex" label="女">女</el-radio>
        </el-form-item>
        <el-form-item label="出生日期:" prop="birthday">
          <div class="block">
            <el-date-picker v-model="userline.birthday" type="date" placeholder="出生日期" />
          </div>
        </el-form-item>
        <el-form-item label="身份证号:">
          <el-input v-model="userline.cardNo" placeholder="身份证号" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelUserInfo">取 消</el-button>
        <el-button type="primary" @click="submitUserInfo">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
const userline = {
  id: '',
  jobNumber: '',
  userCode: '',
  userName: '',
  email: '',
  phone: '',
  sex: '男',
  birthday: '',
  cardNo: '',
  departmentName: '',
  orgId: '',
  orgIdPath: '',
  orgName: ''
}
import mmUrl from '~/utils/utilUrl';
import {
  trueOrFalse,
  reduceArr,
  createDics,
  _currentChange,
  _sizeChange,
  _changeTable,
  _deleteMethods1,
  _searchInfo,
  changeTableHeight
} from '~/utils/util';
import regular from '~/utils/regular.js';
import Pagination from '~/components/commom/pagination';
export default {
  components: {
    Pagination
  },
  data() {
    return {
      visible2: false,
      loading: true,
      change: false,
      dics: [],
      orgs: [],
      defaultProps: {
        children: 'children',
        label: 'orgName'
      },
      projectType: [],
      accreditArr: [], // 是否有新增，修改删除等功能
      accreditChildren: {},
      tableData: [], // talbe表格数据
      businessCategory: [],
      category: [],
      totalCount: 0,
      getSearchInfo: {
        keyword: ''
      },
      copyGetSearchInfo: {
        keyword: ''
      },
      page: {
        maxResultCount: 0,
        pageNo: 0,
        pageSize: 20,
        skipCount: 0
      },
      dialogTableVisible: false,
      isEditor: false,
      userline: userline,
      rules: {
        jobNumber: regular.jobNumber,
        userCode: regular.userCode,
        userName: [
          {
            trigger: 'change',
            validator: this._checked
          }
        ],
        email: regular.email,
        orgId: regular.requireChange,
        phone: regular.phone
      }
    }
  },
  mounted() {
    this.initGetDate()
    const result = JSON.parse(sessionStorage.getItem('menu'))
    this.accreditArr = reduceArr(result, '/' + this.$route.name)
    this.accreditChildren = createDics(
      this.accreditArr.children,
      'permissionCode'
    )
    this.$post({
      url: mmUrl.user.loadOrg,
      data: {}
    }).then(res => {
      this.orgs = res.orgs
    })
  },
  methods: {
    _checked(rule, value, callback) {
      if (value === '') {
        callback(new Error('不大于8位的中文或不大于20位的英文'))
      } else if (
        value &&
        !/^([\u4E00-\u9FA5]{1,8})|([a-zA-Z]{2,20})$/.test(value)
      ) {
        callback(new Error('不大于8位的中文或不大于20位的英文'))
      } else {
        callback()
      }
    },
    handleNodeClick(res) {
      this.userline.orgId = res.id
      this.userline.orgIdPath = res.orgIdPath
      this.userline.orgName = res.orgName
      this.userline.departmentName = res.orgName
      this.visible2 = false
    },
    changeTableData(res) {
      const that = this
      _changeTable(mmUrl.user.getUsers, res, that)
    },
    searchInfoMation(res) {
      this.copyGetSearchInfo = JSON.parse(JSON.stringify(this.getSearchInfo))
      const result = _searchInfo(res, this.page, this.copyGetSearchInfo)
      this.changeTableData(result)
    },
    handleSizeChange(val) {
      const result = _sizeChange(val, this.page, this.copyGetSearchInfo)
      this.changeTableData(result)
    },
    handleCurrentChange(val) {
      const result = _currentChange(val, this.page, this.copyGetSearchInfo)
      this.changeTableData(result)
    },
    deleteUser(row) {
      const that = this
      _deleteMethods1(mmUrl.user.deleteUser, row, that).then(() => {
        that.searchInfoMation('no')
      })
    },
    restUser(row) {
      trueOrFalse(this, true).then(() => {
        this.$post({
          url: mmUrl.user.rest,
          data: {
            id: row.id
          }
        }).then(() => {
          this.$message({
            type: 'success',
            message: '操作成功'
          })
          this.initGetDate()
        })
      })
    },
    initGetDate() {
      const data = {}
      data.page = JSON.parse(JSON.stringify(this.page))
      Object.assign(data, this.copyGetSearchInfo)
      this.$post({
        url: mmUrl.user.pageLoad,
        data: data
      }).then(res => {
        this.totalCount = res.items.totalCount
        this.tableData = res.items.items
        this.loading = false
        changeTableHeight(this)
      })
    },
    createUser() {
      this.dialogTableVisible = true
      this.userline = JSON.parse(JSON.stringify(userline))
      this.isEditor = false
    },
    cancelUserInfo() {
      // 操作成功，清空当前对象
      this.clearUserline()
      this.dialogTableVisible = false
      this.$refs['userline'].resetFields()
    },
    editUser(row) {
      this.$post({
        url: mmUrl.user.loadEditor,
        data: {
          id: row.id
        }
      }).then(res => {
        this.orgs = res.orgs
        this.userline = JSON.parse(JSON.stringify(row))
        this.userline.departmentName = JSON.parse(JSON.stringify(row.orgName))
      })
      this.isEditor = true
      this.dialogTableVisible = true
      this.userline = JSON.parse(JSON.stringify(row))
    },
    submitUserInfo() {
      this.$refs['userline'].validate(valid => {
        // 验证表单数据
        if (valid) {
          if(this.userline.phone){
            this.userline.phone.includes('*')? delete this.userline.phone :''
          }
          const that = this
          this.$post({
            url: this.isEditor ? mmUrl.user.editUser : mmUrl.user.createUser,
            data: {
              item: this.userline
            }
          })
            .then(res => {
              this.initGetDate()
              this.$message({
                type: 'success',
                message: '操作成功'
              })
              this.dialogTableVisible = false
              this.clearUserline()
            })
            .catch(err => this.$message.error(err))
        }
      })
    },
    clearUserline() {
      // 操作成功，清空当前对象
      this.userline.id = '';
      this.userline.jobNumber = '';
      this.userline.userCode = '';
      this.userline.userName = '';
      this.userline.email = '';
      this.userline.phone = '';
      this.userline.sex = '男';
      this.userline.birthday = '';
      this.userline.cardNo = '';
    }
  }
}
</script>

<style lang="scss" module>
.cont_top {
  height: 5 0px;
  .cost {
    display: inline-block !important;
    width: 102px;
  }
  .Business {
    width: 120px;
  }
  .cartgroy {
    display: inline-block !important;
    width: 120px;
  }
  input {
    border-radius: 5px;
  }
}
</style>

